import React, { useState, useEffect } from 'react'
import { Row, Col, Image, List, Card } from 'antd';

import styles from './index.less'

const dataUrl = "https://120.76.193.53/app/mock/data/2061011?scope=response&id=1"

// 相册详情页面               -------（待完成）布局切换成https://ant.design/components/image-cn/
function Detail() {
  console.log('Detail相册详情页面');

  // 相册状态
  const [album, setAlbum] = useState([]);
  const [visible, setVisible] = useState(false);
  const [current, setCurrent] = useState(1)
  const [loading, setLoading] = useState(true)

  // 获取相册数据
  const fetchAlbumData = () => {
    fetch(dataUrl).then(res => res.json()).then(res => {
      const albumData = res.data.images || [];
      console.log('albumData', albumData);
      setAlbum(albumData);
      setLoading(false);
    })
  }

  // 渲染时获取相册数据
  useEffect(() => {
    fetchAlbumData()
  }, [])

  // 点击弹开预览页面
  // const handleClick = (id) => {
  //   setVisible(true)
  // }

  // 渲染相册图片（废弃）
  const renderImages = () => {
    const images = album.images || []
    return images.map(
      (image, index) => {
        return (
          <Col
            className={styles['album-detail-Col']}
            xs={24} sm={12} md={12} lg={12} xl={8} xxl={8} span={6} key={album.id} >
            <Image
              preview={{
                visible: false, onVisibleChange: () => setCurrent(index), mask: React.createElement(mask)
              }}
              alt={image.title}
              src={image.url}
              fallback=""
              onClick={() => handleClick(album.id)}
            >
            </Image>
          </Col>
        )
      }
    )
  }

  const mask = () => {
    return (<span >查看大图</span>)
  }


  // 渲染相册预览图片
  const renderPreviewImages = () => {
    return album.map(image => <Image src={image.url} />)
  }

  const handleClick = (index) => {
    setCurrent(index);
    setVisible(true);
  }

  return (
    <div className={styles['album-detail-container']}>
      {/* <Row gutter={[16, 16]} justify="center" align="middle">
        {renderImages()}
        <div style={{ display: 'none' }}>
          <Image.PreviewGroup preview={{ visible, onVisibleChange: vis => setVisible(vis), current }}>
            {renderPreviewImages()}
          </Image.PreviewGroup>
        </div>
      </Row> */}

      <List
        locale={{ emptyText: '暂时没有照片哦~' }}
        loading={loading}
        // size={'large'}
        grid={{
          gutter: 8,
          xs: 1,
          sm: 1,
          md: 2,
          lg: 2,
          xl: 3,
          xxl: 3,
        }}
        dataSource={album}
        rowKey={item => item.id}
        renderItem={(item, index) => (
          <List.Item key={item.id}>
            <Card hoverable={true} className={styles['zoomImage']} style={{ backgroundImage: `url(${item.url})` }} onClick={() => handleClick(`${index}`)}>
              {/* <Card className={styles['zoomImage']} > */}
              {/* <Image
                preview={{
                  visible: false, onVisibleChange: () => setCurrent(index), mask: React.createElement(mask)
                }}
                alt={item.title}
                src={item.url}
                fallback=""
                onClick={() => handleClick(album.id)}
              /> */}
            </Card>
          </List.Item>
        )}
      />
      <div style={{ display: 'none' }}>
        <Image.PreviewGroup preview={{ visible, onVisibleChange: vis => setVisible(vis), current: current }}>
          {renderPreviewImages()}
        </Image.PreviewGroup>
      </div>
    </div>
  )
}

export default Detail


const result = {
  "data": {
    "id": 1,
    "images": [
      {
        "id": 1,
        "title": "文叫存象",
        "description": "阿坝藏族羌族自治州",
        "url": "http://pic1.win4000.com/wallpaper/2018-05-24/5b067b4c9704a.jpg",
        "createTime": "2021-08-26 17:06:00",
        "creator": "借力好风"
      },
      {
        "id": 2,
        "title": "新面天",
        "description": "宜昌市",
        "url": "http://pic1.win4000.com/wallpaper/2018-05-24/5b067b4a615b9.jpg",
        "createTime": "2021-08-26 17:06:00",
        "creator": "借力好风"
      },
      {
        "id": 3,
        "title": "机头须过代可",
        "description": "舟山市",
        "url": "http://pic1.win4000.com/wallpaper/2018-05-24/5b0677e08f853.jpg",
        "createTime": "2021-08-26 17:06:00",
        "creator": "借力好风"
      },
      {
        "id": 4,
        "title": "任不你",
        "description": "娄底市",
        "url": "http://pic1.win4000.com/wallpaper/2018-05-24/5b067b4e7c283.jpg",
        "createTime": "2021-08-26 17:06:00",
        "creator": "借力好风"
      },
      {
        "id": 5,
        "title": "据通要",
        "description": "淮安市",
        "url": "http://pic1.win4000.com/wallpaper/2018-05-24/5b067b4c9704a.jpg",
        "createTime": "2021-08-26 17:06:00",
        "creator": "借力好风"
      },
      {
        "id": 6,
        "title": "会委存难给马",
        "description": "台南市",
        "url": "http://pic1.win4000.com/wallpaper/2017-12-22/5a3c72577a961.jpg",
        "createTime": "2021-08-26 17:06:00",
        "creator": "借力好风"
      },
      {
        "id": 7,
        "title": "根四自南实",
        "description": "天津市",
        "url": "http://pic1.win4000.com/wallpaper/2018-05-24/5b067b50435c0.jpg",
        "createTime": "2021-08-26 17:06:00",
        "creator": "借力好风"
      },
      {
        "id": 8,
        "title": "即向设",
        "description": "喀什地区",
        "url": "http://pic1.win4000.com/wallpaper/2017-12-22/5a3c726bd2998.jpg",
        "createTime": "2021-08-26 17:06:00",
        "creator": "借力好风"
      },
      {
        "id": 9,
        "title": "门美联",
        "description": "白银市",
        "url": "http://pic1.win4000.com/wallpaper/2/53f1755344519.jpg",
        "createTime": "2021-08-26 17:06:00",
        "creator": "借力好风"
      },
      {
        "id": 10,
        "title": "始打素",
        "description": "泉州市",
        "url": "http://pic1.win4000.com/wallpaper/2018-05-24/5b067b4c9704a.jpg",
        "createTime": "2021-08-26 17:06:00",
        "creator": "借力好风"
      },
      {
        "id": 11,
        "title": "采却达处快布知",
        "description": "上海市",
        "url": "http://pic1.win4000.com/wallpaper/2018-05-24/5b067b464aa3e.jpg",
        "createTime": "2021-08-26 17:06:00",
        "creator": "借力好风"
      },
      {
        "id": 12,
        "title": "四存北得",
        "description": "舟山市",
        "url": "http://pic1.win4000.com/wallpaper/2/53f1755c9b074.jpg",
        "createTime": "2021-08-26 17:06:00",
        "creator": "借力好风"
      },
      {
        "id": 13,
        "title": "新例林按文",
        "description": "乌海市",
        "url": "http://pic1.win4000.com/wallpaper/2/53f1755c9b074.jpg",
        "createTime": "2021-08-26 17:06:00",
        "creator": "借力好风"
      },
      {
        "id": 14,
        "title": "半面达才信军气",
        "description": "贺州市",
        "url": "http://pic1.win4000.com/wallpaper/2018-05-24/5b067b48a1814.jpg",
        "createTime": "2021-08-26 17:06:00",
        "creator": "借力好风"
      },
      {
        "id": 15,
        "title": "发又已本",
        "description": "上海市",
        "url": "http://pic1.win4000.com/wallpaper/2017-12-22/5a3c72685c9f0.jpg",
        "createTime": "2021-08-26 17:06:00",
        "creator": "借力好风"
      },
      {
        "id": 16,
        "title": "般面原空道布",
        "description": "三明市",
        "url": "http://pic1.win4000.com/wallpaper/2018-05-24/5b067b4c9704a.jpg",
        "createTime": "2021-08-26 17:06:00",
        "creator": "借力好风"
      },
      {
        "id": 17,
        "title": "专热方青",
        "description": "株洲市",
        "url": "http://pic1.win4000.com/wallpaper/2018-05-24/5b067b4e7c283.jpg",
        "createTime": "2021-08-26 17:06:00",
        "creator": "借力好风"
      },
      {
        "id": 18,
        "title": "头百小定",
        "description": "黄冈市",
        "url": "http://pic1.win4000.com/wallpaper/2018-05-24/5b067b48a1814.jpg",
        "createTime": "2021-08-26 17:06:00",
        "creator": "借力好风"
      },
      {
        "id": 19,
        "title": "今常们别感元",
        "description": "运城市",
        "url": "http://pic1.win4000.com/wallpaper/2/53f1755c9b074.jpg",
        "createTime": "2021-08-26 17:06:00",
        "creator": "借力好风"
      },
      {
        "id": 20,
        "title": "总半无点",
        "description": "天津市",
        "url": "http://pic1.win4000.com/wallpaper/2018-05-24/5b067b4c9704a.jpg",
        "createTime": "2021-08-26 17:06:00",
        "creator": "借力好风"
      },
      {
        "id": 21,
        "title": "日记质色需志",
        "description": "铜仁市",
        "url": "http://pic1.win4000.com/wallpaper/2018-05-24/5b067b48a1814.jpg",
        "createTime": "2021-08-26 17:06:00",
        "creator": "借力好风"
      }
    ]
  }
}